<template>
  <view class='studentInfo'>
    <view class="studentInfoInner">
      <view class="top-inner">
        <view class="navbar-wrapper">
          <view class="title">{{ inspectInfo.name || '暂无' }}</view>
        </view>
      </view>

      <u-form class="form-box" labelPosition="left" :model="ruleForm" :rules="rules" ref="ruleForm" labelWidth='90px'>
        <u-form-item label="姓名" prop="name" borderBottom>
          <u--input placeholder="请输入姓名" border="surround" v-model="ruleForm.name"></u--input>
        </u-form-item>
        <u-form-item label="学号" prop="number" borderBottom>
          <u--input v-model="ruleForm.number" placeholder="请输入学号" border="bottom" type='number'></u--input>
        </u-form-item>
        <u-form-item label="性别" prop="sex" borderBottom @click="showSex = true;">
          <u--input v-model="ruleForm.sex" border="bottom" readonly placeholder="请选择性别"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="入学年份" prop="year" borderBottom @click="showYear = true;">
          <u--input v-model="ruleForm.year" border="bottom" readonly placeholder="请选择入学年份"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="年级" prop="grade" borderBottom @click="showGrade = true;">
          <u--input v-model="ruleForm.grade" border="bottom" readonly placeholder="请选择年级"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="班级" prop="classs" borderBottom @click="showClasss = true;">
          <u--input v-model="ruleForm.classs" border="bottom" readonly placeholder="请选择班级"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="年龄" prop="birthday" borderBottom @click="showBirthday = true;">
          <u--input v-model="ruleForm.birthday" border="bottom" readonly placeholder="请选择年龄"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="身份证号" prop="idCard" borderBottom>
          <u--input placeholder="请输入身份证号" border="surround" v-model="ruleForm.idCard"></u--input>
        </u-form-item>
        <u-form-item label="手机号" prop="mobile" borderBottom>
          <u--input placeholder="请输入手机号" border="surround" v-model="ruleForm.mobile" type='number'></u--input>
        </u-form-item>
        <u-form-item label="学校" prop="school" borderBottom>
          <u--input placeholder="请输入学校" border="surround" v-model="ruleForm.school" readonly></u--input>
        </u-form-item>
        <u-form-item label="检查校验码" prop="checkNumber" borderBottom>
          <u--input placeholder="请输入检查校验码" border="surround" v-model="ruleForm.checkNumber" type='number'></u--input>
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom-btn-box">
      <u-button @click="resetForm('ruleForm')" size='large' style="margin-right: 0.4rem;">重置</u-button>
      <u-button type='primary' color='#26A69A' @click="submitForm('ruleForm')" size='large'
        style="margin-left: 0.4rem;">立即创建</u-button>
    </view>
    <u-action-sheet :show="showSex" :actions="sexList" title="性别" description="请选择性别" @close="showSex = false"
      @select="sexSelect">
    </u-action-sheet>
    <u-picker confirmColor='#26A69A' :show="showYear" keyName="name" :columns="yearList" title="请选择入学年份" description="入学年份" @confirm='yearSelect' @cancel="showYear = false" @close="showYear = false" itemHeight='80'>
    </u-picker>
    <u-picker confirmColor='#26A69A' :show="showGrade" keyName="name" :columns="gradeList" title="请选择年级" description="年级" @confirm='gradeSelect' @cancel='showGrade = false' @close="showGrade = false" itemHeight='80'>
    </u-picker>
    <u-picker confirmColor='#26A69A' :show="showClasss" keyName="name" :columns="classsList" title="请选择班级" description="班级" @confirm='classsSelect' @cancel='showClasss = false' @close="showClasss = false" itemHeight='80'>
    </u-picker>
    <u-picker confirmColor='#26A69A' :show="showBirthday" keyName="name" :columns="birthdayList" title="请选择年龄" description="年龄" @confirm='birthdaySelect' @cancel='showBirthday = false' @close="showBirthday = false" itemHeight='80'>
    </u-picker>
  </view>
</template>
<script>
import mRequest from "@/api/index";
export default {
  data () {
    var checkMobile = (rule, value, callback) => {
      let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      if (!value) {
        return callback(new Error('手机号码不能为空'))
      } else if (!reg.test(value)) {
        return callback(new Error('手机号格式不正确'))
      } else {
        callback()
      }
    }
    var checkIdCard = (rule, value, callback) => {
      // 验证长度
      if (value === '') {
        callback()
      }
      if (!/^\d{17}(\d|x)$/i.test(value)) {
        return callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }
    return {
      showSex: false,
      showYear: false,
      showGrade: false,
      showClasss: false,
      showBirthday: false,
      // 检查id
      inspectId: '',
      // 检查信息
      inspectInfo: {},
      labelPosition: 'right',
      sexList: [
        {
          name: '男',
          value: '男'
        },
        {
          name: '女',
          value: '女'
        }
      ],
      gradeList: [[
        {
          name: '一年级',
          value: '一年级'
        },
        {
          name: '二年级',
          value: '二年级'
        },
        {
          name: '三年级',
          value: '三年级'
        },
        {
          name: '四年级',
          value: '四年级'
        },
        {
          name: '五年级',
          value: '五年级'
        },
        {
          name: '六年级',
          value: '六年级'
        }
      ]],
      yearList: [[
        {
          name: '2010年',
          value: '2010年'
        },
        {
          name: '2011年',
          value: '2011年'
        },
        {
          name: '2012年',
          value: '2012年'
        },
        {
          name: '2013年',
          value: '2013年'
        },
        {
          name: '2014年',
          value: '2014年'
        },
        {
          name: '2015年',
          value: '2015年'
        },
        {
          name: '2016年',
          value: '2016年'
        },
        {
          name: '2017年',
          value: '2017年'
        },
        {
          name: '2018年',
          value: '2018年'
        },
        {
          name: '2019年',
          value: '2019年'
        },
        {
          name: '2020年',
          value: '2020年'
        },
        {
          name: '2021年',
          value: '2021年'
        },
        {
          name: '2022年',
          value: '2022年'
        },
        {
          name: '2023年',
          value: '2023年'
        },
        {
          name: '2024年',
          value: '2024年'
        },
        {
          name: '2025年',
          value: '2025年'
        },
        {
          name: '2026年',
          value: '2026年'
        },
        {
          name: '2027年',
          value: '2027年'
        },
        {
          name: '2028年',
          value: '2028年'
        },
        {
          name: '2029年',
          value: '2029年'
        },
        {
          name: '2030年',
          value: '2030年'
        },
        {
          name: '2030年',
          value: '2030年'
        },
        {
          name: '2031年',
          value: '2031年'
        },
        {
          name: '2032年',
          value: '2032年'
        },
        {
          name: '2033年',
          value: '2033年'
        },
        {
          name: '2034年',
          value: '2034年'
        },
        {
          name: '2035年',
          value: '2035年'
        },
        {
          name: '2036年',
          value: '2036年'
        },
        {
          name: '2037年',
          value: '2037年'
        }
      ]],
      classsList: [[
        {
          name: '一班',
          value: '一班'
        },
        {
          name: '二班',
          value: '二班'
        },
        {
          name: '三班',
          value: '三班'
        },
        {
          name: '四班',
          value: '四班'
        },
        {
          name: '五班',
          value: '五班'
        },
        {
          name: '六班',
          value: '六班'
        },
        {
          name: '七班',
          value: '七班'
        },
        {
          name: '八班',
          value: '八班'
        },
        {
          name: '九班',
          value: '九班'
        },
        {
          name: '十班',
          value: '十班'
        },
        {
          name: '十一班',
          value: '十一班'
        },
        {
          name: '十二班',
          value: '十二班'
        },
        {
          name: '十三班',
          value: '十三班'
        },
        {
          name: '十四班',
          value: '十四班'
        },
        {
          name: '十五班',
          value: '十五班'
        },
        {
          name: '十六班',
          value: '十六班'
        },
        {
          name: '十七班',
          value: '十七班'
        },
        {
          name: '十八班',
          value: '十八班'
        },
        {
          name: '十九班',
          value: '十九班'
        },
        {
          name: '二十班',
          value: '二十班'
        },
        {
          name: '二一班',
          value: '二一班'
        },
        {
          name: '二二班',
          value: '二二班'
        },
        {
          name: '二三班',
          value: '二三班'
        },
        {
          name: '二四班',
          value: '二四班'
        },
        {
          name: '二五班',
          value: '二五班'
        },
        {
          name: '二六班',
          value: '二六班'
        },
        {
          name: '二七班',
          value: '二七班'
        },
        {
          name: '二八班',
          value: '二八班'
        },
        {
          name: '二九班',
          value: '二九班'
        },
        {
          name: '三十班',
          value: '三十班'
        }
      ]],
      birthdayList: [[
        {
          name: '3岁',
          value: '3岁'
        },
        {
          name: '4岁',
          value: '4岁'
        },
        {
          name: '5岁',
          value: '5岁'
        },
        {
          name: '6岁',
          value: '6岁'
        },
        {
          name: '7岁',
          value: '7岁'
        },
        {
          name: '8岁',
          value: '8岁'
        },
        {
          name: '9岁',
          value: '9岁'
        },
        {
          name: '10岁',
          value: '10岁'
        },
        {
          name: '11岁',
          value: '11岁'
        },
        {
          name: '12岁',
          value: '12岁'
        },

        {
          name: '13岁',
          value: '13岁'
        },
        {
          name: '14岁',
          value: '14岁'
        },
        {
          name: '15岁',
          value: '15岁'
        },
        {
          name: '16岁',
          value: '16岁'
        },
        {
          name: '17岁',
          value: '17岁'
        },
        {
          name: '18岁',
          value: '18岁'
        },
        {
          name: '19岁',
          value: '19岁'
        },
        {
          name: '20岁',
          value: '20岁'
        }
      ]],
      // ruleForm: {
      //   name: '111',
      //   number: '12',
      //   checkNumber: '',
      //   year: '2001年',
      //   sex: '男',
      //   grade: '一年级',
      //   classs: '三班',
      //   birthday: '3岁',
      //   idCard: '',
      //   mobile: '13033333333',
      //   school: ''
      // },
      ruleForm: {
        name: '',
        number: '',
        checkNumber: '',
        year: '',
        sex: '',
        grade: '',
        classs: '',
        birthday: '',
        idCard: '',
        mobile: '',
        school: ''
      },
      rules: {
        name: [
          { required: true, message: '学生姓名不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '学号不能为空', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        year: [
          { required: true, message: '入学年份不能为空', trigger: 'change' }
        ],
        grade: [
          { required: true, message: '年级不能为空', trigger: 'change' }
        ],
        classs: [
          { required: true, message: '班级不能为空', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '年龄不能为空', trigger: 'change' }
        ],
        idCard: [
          { validator: checkIdCard, required: false, trigger: 'blur' }
        ],
        mobile: [
          { validator: checkMobile, required: true, trigger: 'blur' }
        ],
        school: [
          { required: true, message: '学校不能为空', trigger: 'blur' }
        ],
        checkNumber: [
          { required: true, message: '检查校验码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    sexSelect (e) {
      this.ruleForm.sex = e.name
    },
    yearSelect (e) {
      this.ruleForm.year = e.value[0].name
      this.showYear = false
    },
    gradeSelect (e) {
      this.ruleForm.grade = e.value[0].name
      this.showGrade = false
    },
    classsSelect (e) {
      this.ruleForm.classs = e.value[0].name
      this.showClasss = false
    },
    birthdaySelect (e) {
      this.ruleForm.birthday = e.value[0].name
      this.showBirthday = false
    },
    // 获取检查的名称
    getExamInfo () {
      let params = {
        id: this.inspectId
      }
      mRequest.inspectList(params).then(res=>{
        if (res && res.code === 0) {
          this.inspectInfo = res.page.records[0]
        } else {
          console.log(res)
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate().then(res => {
				let params = {
            inspectId: this.inspectId,
            checkNumber: this.ruleForm.checkNumber,
            students: [{
              name: this.ruleForm.name,
              number: this.ruleForm.number,
              grade: this.ruleForm.grade,
              year: this.ruleForm.year,
              classs: this.ruleForm.classs,
              birthday: this.ruleForm.birthday,
              idCard: this.ruleForm.idCard,
              mobile: this.ruleForm.mobile,
              sex: this.ruleForm.sex,
              school: this.ruleForm.school
            }]
          }
          mRequest.saveDto(params).then(res=>{
            if (res && res.code === 0) {
              uni.showToast({
                icon: 'none',
                title: '学生信息添加成功'
              });
              this.resetForm('ruleForm')
            } else {
              console.log(res)
            }
          })
			}).catch(errors => {
				console.log(errors)
			})
    },
    resetForm (formName) {
      this.ruleForm = {
        name: '',
        number: '',
        checkNumber: '',
        sex: '',
        grade: '',
        classs: '',
        birthday: '',
        idCard: '',
        mobile: ''
      }
      this.$refs[formName].clearValidate();   //清空校验结果

    }
  },
  created () {
    console.log(this.$route.query.schoolName)
    this.inspectId = this.$route.query.inspectId || '0836f366313a4c0cb407ff095e8465b9'
    this.ruleForm.school = this.$route.query.schoolName
    this.getExamInfo()
  }
}
</script>
<style lang='scss'>
.studentInfo {
  height: 100%;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(-120deg, #6200EA, #304FFE, #26A69A, #00C853);

  .studentInfoInner {
    height: 100%;
    min-height: 100vh;
    width: 100%;
    background-color: #f5f5f5e0;
    padding-bottom: 5rem;
    padding-top: 70px;
    box-sizing: border-box;

    .top-inner {
      height: 70px;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;

      .navbar-wrapper {
        position: relative;
        border-bottom: 1px solid #dcdfe6;
        height: 70px;
        padding: 0 12px 0 24px;
        box-sizing: border-box;
        background-image: radial-gradient(transparent 1px, #fff 1px);
        background-size: 4px 4px;
        backdrop-filter: saturate(50%) blur(4px);
        -webkit-backdrop-filter: saturate(50%) blur(4px);
        top: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 8px 8px;

        .title {
          font-weight: 600;
          font-size: 20px;
          background-image: -webkit-linear-gradient(60deg, #2196F3, #26A69A);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .student-ruleForm {
      margin: 10px 10px 0;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: #dcdfe6;

      .u-form-item__label {
        padding: 0 !important;
      }
    }
  }

  .bottom-btn-box {
    height: 4rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .u-radio {
    margin-right: 1rem;
  }
  .form-box{
    padding: 1rem;
    margin: 1rem;
    background: #ffffff80;
    border-radius: 8px;
  }
}
</style>